<template>
    <h2>客户投诉列表</h2>
    <el-form :inline="true" :model="condForm">
        <el-form-item label="投诉单号">
            <el-input v-model="condForm.id" />
        </el-form-item>
        <el-form-item label="问题描述">
            <el-input v-model="condForm.question" />
        </el-form-item>
        <br />
        <el-form-item label="紧急程度" style="width: 20%;">
            <el-select v-model="condForm.grade" placeholder="请选择紧急程度......">
                <el-option label="全部" value="" />
                <el-option label="普通" value="普通" />
                <el-option label="加急" value="加急" />
            </el-select>
        </el-form-item>
        <el-form-item label="商品状态" style="width: 20%;">
            <el-select v-model="condForm.state" placeholder="请选择商品状态......">
                <el-option label="全部" value="" />
                <el-option label="未处理" value="未处理" />
                <el-option label="已处理" value="已处理" />
                <el-option label="未回访" value="未回访" />
                <el-option label="已回访" value="已回访" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="getAfterSaleList(1)">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="afterSalerList" style="width: 100%">
        <el-table-column prop="id" label="投诉编号" />
        <el-table-column prop="custName" label="客户姓名" />
        <el-table-column prop="question" label="问题类型" />
        <el-table-column prop="state" label="处理状态" />
        <el-table-column prop="orderDate" label="支付日期" />
        <el-table-column prop="grade" label="紧急程度" />
        <el-table-column prop="level" label="投诉满意度" />
        <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
                <el-button size="small" type="primary" @click="openReplayDialog(scope.row.id)">
                    处理
                </el-button>
                <el-button size="small" type="primary" @click="getReplayList(scope.row.id, 1)">
                    查看处理详情
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="getAfterSaleList"
        v-model:current-page="currentPage" />

    <el-dialog v-model="dialogReplyDisplay" title="回复" width="500">

        <el-form :inline="true" :model="replayForm">
            <el-form-item label="回复内容">
                <el-input v-model="replayForm.content" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogReplyDisplay = false">取消</el-button>
                <el-button type="primary" @click="saveReplay">
                    回复
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogReplyDetailDisplay" title="查看回复详情" width="500">
        <el-table :data="replayList" style="width: 100%">
            <el-table-column prop="redate" label="回复日期" />
            <el-table-column prop="content" label="回复内容" />
        </el-table>
        <el-pagination layout="prev, pager, next" :total="replayListTotal" @current-change="(current) => getReplayList(nowReplayId, current)" v-model:current-page="replayListCurrentPage" />
        
    </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const dialogReplyDetailDisplay = ref(false)
const replayList = ref([])
const replayListCurrentPage = ref(1)
const replayListTotal = ref()
const nowReplayId = ref()

function getReplayList(id, currentPage) {
    console.log(currentPage + "Id: " + id)
    nowReplayId.value = id
    axios.get("http://localhost:8081/listReplay?id=" + id + "&pageNum=" + currentPage).then((resp) => {
        replayList.value = resp.data.list
        replayListTotal.value = resp.data.total
        dialogReplyDetailDisplay.value = true
    }).catch((error) => {
        console.log(error)
    })
}

const currentPage = ref(1)
const condForm = reactive({
    id: "",
    question: "",
    grade: "",
    state: "",
})

const dialogReplyDisplay = ref(false)
const replayForm = reactive({
    content: ''
})

function openReplayDialog(qid) {
    dialogReplyDisplay.value = true
    replayForm.questId = qid


}

function saveReplay() {
    axios.post("http://localhost:8081/saveReplay", replayForm).then((resp) => {
        if (resp.data.code == 200) {
            dialogReplyDisplay.value = false
            ElMessage({ message: resp.data.msg, type: 'success' })
            replayForm.content = ''
        } else {
            ElMessage.error(resp.data.msg)
        }
    }).catch((error) => {
        console.log(error)
    })
}

const afterSalerList = ref([])
const total = ref()

function getAfterSaleList(currentPage) {
    condForm.pageNum = currentPage
    console.log(condForm)
    axios.post("http://localhost:8081/listAfterSale", condForm).then((resp) => {
        console.log(resp.data)
        afterSalerList.value = resp.data.list
        total.value = resp.data.total
    }).catch((error) => {
        console.log(error)
    })

}

onMounted(() => {
    getAfterSaleList(1)
})
</script>

<style scoped></style>